<template>
  <z-paging ref="paging" v-model="dataList"
            auto-show-back-to-top
            use-page-scroll
            :default-page-size="20"
            @query="queryList"
            :refresher-complete-delay="600">
    <template #refresher>
      <view style="display: flex;justify-content: center;align-items: center;padding-top: 120rpx;">
        <cache-image src="https://lsz.lszbg.com/imgs/logo_loading.gif" :style="{height:'110rpx',width:'110rpx',margin:'auto'}">
        </cache-image>
      </view>
    </template>
    <template #top>
      <u-navbar
          title="建议反馈"
          placeholder
          titleStyle="color:black"
          leftIconColor="#000"
          auto-back
          bgColor="#FDE52F">
      </u-navbar>
    </template>
<!--    <template #bottom>-->
<!--      <u-button color="#FDE52F" :customStyle="{marginTop: '20px',color: 'black'}" size="large" @click="add">-->
<!--        <view>添加建议反馈</view>-->
<!--      </u-button>-->
<!--      <view style="background-color: #FFFFFF">-->
<!--        <u-safe-bottom></u-safe-bottom>-->
<!--      </view>-->
<!--    </template>-->
    <view class="item_feed_back" v-for="(item, index) in dataList" :key="index" @click="toFeedbackDel(item)">
      <view style="flex: 1">
        <view>
          反馈时间：{{ item.create_time }}
        </view>
        <view style="margin-top: 10rpx;color: #333333">
          反馈类型：{{ listType[item.type - 1] }}
        </view>
      </view>
      <view class="item_content" :class="item.status === 0 ? 'status3':item.status === 1 ? 'status2' : 'status1'">
       <text style="margin: auto">{{ item.status === 0 ? '待处理':item.status === 1 ? '处理中': '已处理'}}</text>
      </view>
    </view>
    <template #empty>
      <XtxEmpty/>
    </template>
    <template #loading>
      <view style="display: flex;flex-direction: column;align-items: center;padding-top: 120rpx;">
        <image style="width: 110rpx;height: 110rpx;" src="https://lsz.lszbg.com/imgs/logo_loading.gif"></image>
        <view
            style="font-size: 38rpx;font-weight: 600;color: #F97632;text-align: center;box-sizing: border-box;padding: 40rpx 0;">
          领食周边购
        </view>
      </view>
    </template>
    <!-- 自定义的没有更多数据view -->
    <template #loadingMoreNoMore>
      <view style="font-size: 26rpx;color: #b4b4b4;text-align: center;box-sizing: border-box;padding: 40rpx 0;">
        没有更多数据
      </view>
    </template>
  </z-paging>
</template>

<script setup>
import {ref} from "vue";
import {onPageScroll, onReachBottom, onShow} from "@dcloudio/uni-app";
import useZPaging from "z-paging/components/z-paging/js/hooks/useZPaging";
import XtxEmpty from "../../components/XtxEmpty.vue";
import {userFeedbackAPI} from "../../services/me";
import CacheImage from "../../components/CacheImage.vue";

const paging = ref(null)
useZPaging(paging)
let dataList = ref([])
let listType = ref(['订单问题', '餐品问题', '商家问题', '程序BUG', '售后问题', '其他反馈'])

const queryList = (pageNo, pageSize) => {
  userFeedbackAPI(pageNo, pageSize).then(res => {
    setTimeout(() => {
      paging.value.complete(res.result);
    }, 600)
  }).catch(() => {
    paging.value.complete(false);
  })
}

const add = () => {
  uni.navigateTo({
    url: 'addfeedback'
  })
}
const toFeedbackDel = (item) => {
  console.log("item",item)
  uni.navigateTo({
    url: 'feedbackdel?id=' + item.id
  })
}

onShow(()=>{
  // paging?.value?.refresh();
})
onPageScroll(e => {
})

onReachBottom(() => {
})
</script>
<style lang="scss">
page {
  background-color: #F6F6F6;
}
</style>

<style scoped lang="scss">
.item_feed_back {
  background-color: #FFFFFF;
  padding: 20rpx;
  margin: 20rpx 20rpx 0;
  font-size: 26rpx;
  border-radius: 10rpx;
  color: #999999;
  display: flex;
  align-items: center;
}
.item_content{
  width: 110rpx;
  height: 56rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-items: center;
  font-size: 20rpx;
  font-weight: bold;
  color: #FFFFFF;
}
.status3{
  color: #ff8e8e;
  border: #ff8e8e solid 5rpx;
  border-radius: 100rpx;
}
.status2{
  color: #ffba3d;
  border: #ffba3d solid 5rpx;
  border-radius: 100rpx;
}
.status1{
  color: #63d41e;
  border: #63d41e solid 5rpx;
  border-radius: 100rpx;
}
</style>
